<template>
  <table-box ref="tableBox" class="table-height-auto" :data="tableData" :table-config="tableConfig" />
</template>
<script>
export default {
  name: 'ChangeTable',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: 'edit'
    }
  },
  data() {
    return {
      tableConfig: {
        hideFuncBar: true,
        setting: [
          {
            prop: 'isChange',
            label: '是否变更',
            minWidth: 100,
            render: (h, row) => {
              if (this.type !== 'edit') {
                const t = [1, '1'].includes(row.isChange) ? '是' : '否'
                return h('span', t)
              }
              return h('el-switch', {
                props: {
                  activeValue: 1,
                  inactiveValue: 0,
                  value: row.isChange
                },
                on: {
                  input: v => {
                    this.$set(row, 'isChange', v)
                    const t = this.tableData.filter(e => [1, '1'].includes(e.isChange))
                    this.$emit('input', t)
                    this.$emit('change', t)
                  }
                }
              })
            }
          },
          {
            prop: 'code',
            label: '门店编码',
            minWidth: 100
          },
          {
            prop: 'name',
            label: '门店名称',
            minWidth: 100
          },
          {
            prop: 'shopAddr',
            label: '详细地址',
            minWidth: 100
          },
          {
            prop: 'operateArea',
            label: '经营面积(㎡)',
            minWidth: 100
          },
          {
            prop: 'businessTypeName',
            label: '现经营业务类型',
            minWidth: 100,
            formatData: v => {
              return v.businessTypeName instanceof Array ? v.businessTypeName.join(',') : v.businessTypeName
            }
          }
        ]
      }
    }
  }
}
</script>
